<!--
 * @Descripttion: (/HistoryDust)
 * @version: (1.0)
 * @Author: (admin)
 * @Date: (2024-11-08)
 * @LastEditors: (admin)
 * @LastEditTime: (2024-11-08)
-->
<template>
  <div class="app-container">
    <div style="height: 50%;">
      <!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
      <el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" :label-width="labelWidth"
        v-show="showSearch" @submit.native.prevent>
        <el-form-item label="刷新时间" prop="machineName">
          <el-date-picker v-model="queryParams.saveTime" type="week" format="yyyy 第 WW 周"  value-format="yyyy-MM-dd"
             
              :picker-options="{ firstDayOfWeek: 1 }" placeholder="选择刷新时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="主机名称" prop="machineName">
          <el-select v-model="queryParams.machineName" clearable filterable placeholder="请输入主机名称">
            <el-option v-for="item in hostOptions" :key="item.id" :label="item.machineName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主机地址" prop="location">
          <el-input v-model="queryParams.location" placeholder="请输入主机地址" />
        </el-form-item>
        <el-form-item label="主机场景" prop="machineSence">
          <el-input v-model="queryParams.machineSence" placeholder="请输入主机场景" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleEcharts">查看统计图</el-button> -->
          <el-button id="printBut" v-print="printContent" style="display: none;" />
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handlePrint">打印</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据区域 -->
      <el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row
        :row-style="{ height: 15 + 'px' }" :cell-style="{ padding: 3 + 'px' }"
         style="margin-top:0px">
        <el-table-column prop="MachineNo" label="主机编号" align="center"/>
        <el-table-column prop="MachineName" label="主机名称" align="center"/>
        <el-table-column prop="MachineSence" label="主机场景" align="center" />
        <el-table-column prop="Location" label="主机地址" align="center"/>
        <el-table-column prop="WStatus" label="喷雾状态" align="center" />
        <!-- <el-table-column prop="temperValue" label="温度" align="center" :show-overflow-tooltip="true" width="140px" />
        <el-table-column prop="pressValue" label="压力" align="center" :show-overflow-tooltip="true" width="140px" />
        <el-table-column prop="humValue" label="湿度" align="center" :show-overflow-tooltip="true" width="140px" />
        <el-table-column prop="dustValue" label="降尘浓度" align="center" :show-overflow-tooltip="true" width="140px" /> -->
        <el-table-column prop="qTAlarm" label="报警状态" align="center" :show-overflow-tooltip="true" width="140px" />
        <el-table-column prop="saveTime" label="刷新时间" align="center" :show-overflow-tooltip="true" width="220px" />
      </el-table>
      <pagination style="padding-top: 0px;" background :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
    <div style="height: 50%;">

      <div id="hostList" style="text-align:center" v-show="total > 0">
        <div id="main" style="height: 350px;padding-right:40px;padding-left:20px; padding-bottom: 20px;"></div>
        <el-table id="print" style="padding-right:20px; padding-left:20px;" :row-style="{ height: '31px' }"
          :cell-style="{ padding: '0px' }" :span-method="objectOneMethod" :data="dataList" ref="eltable" border
          class="print">
          <el-table-column prop="MachineNo" label="主机编号" align="center" width="100px" />
          <el-table-column prop="MachineName" label="主机名称" align="center" width="200px" />
          <el-table-column prop="MachineSence" label="主机场景" align="center" width="130px" />
          <el-table-column prop="Location" label="主机地址" align="center" width="220px" />
          <el-table-column prop="WStatus" label="喷雾状态" align="center" width="100px" />
          <!-- <el-table-column prop="temperValue" label="温度" align="center" :show-overflow-tooltip="true" width="140px" />
          <el-table-column prop="pressValue" label="压力" align="center" :show-overflow-tooltip="true" width="140px" />
          <el-table-column prop="humValue" label="湿度" align="center" :show-overflow-tooltip="true" width="140px" />
          <el-table-column prop="dustValue" label="降尘浓度" align="center" :show-overflow-tooltip="true" width="140px" /> -->
          <el-table-column prop="qTAlarm" label="报警状态" align="center" :show-overflow-tooltip="true" width="140px" />
          <el-table-column prop="saveTime" label="刷新时间" align="center" :show-overflow-tooltip="true" width="220px" />

        </el-table>

      </div>
    </div>
  </div>


</template>
<script>
import {
  listReportDustTemp,
  getEcharts,
} from '@/api/dust/reportDustTemp.js';
import * as echarts from 'echarts';
export default {
  name: "historydust",
  data() {
    return {
      labelWidth: "100px",
      formLabelWidth: "100px",
      // 选中id数组
      ids: [],
      list: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sort: undefined,
        sortType: undefined,
      },
      hostParams: {
        pageNum: 1,
        pageSize: 100,
        machineName: "",
        location: "",
        machineSence: "",
      },
      falg: false,
      printContent: {
        id: 'hostList',
        popTitle: "&nbsp;", //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        previewBeforeOpenCallback() {
          vue.falg = true;
          console.log('正在加载预览窗口')
          this.getmain();
        },
        previewOpenCallback() {
          vue.falg = true;
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          vue.falg = true;
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.falg = true;
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          vue.falg = true;
          vue.getmain();
          console.log('关闭了打印工具')
        },
        clickMounted(vue) {
          vue.falg = true;
          console.log('点击了打印按钮')
          // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
        }
      },
      hostOptions: [],
      // 弹出层标题
      title: "",
      // 操作类型 1、add 2、edit
      opertype: 0,
      // 是否显示弹出层
      open: false,
      dateData: [],
      WdData: [],
      SdData: [],
      YlData: [],
      JcData: [],
      // 数据列表
      dataList: [],
      // 总记录数
      total: 0,
      // 提交按钮是否显示
      btnSubmitVisible: true,
    };
  },
  created() {
    // 列表数据查询
    this.getList();
    this.listHostMachine(this.hostParams).then(res => {
      this.hostOptions = res.data.result;
    });

  },
  methods: {
    handlePrint() {
      if (this.total == 0) {
        this.$message.error('暂无打印数据！！');
        return false;
      }
      this.$confirm("确定要打印?", "打印提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '数据太大正在打印，请耐心等待不要离开该界面。。。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        document.getElementById("printBut").click();
        loading.close();
      })
    },
    getEcharts() {
      this.hostParams.type = "1";
      this.hostParams.machineName = this.queryParams.machineName;
      this.hostParams.location = this.queryParams.location;
      this.hostParams.machineSence = this.queryParams.machineSence;
      getEcharts(this.hostParams).then(res => {
        this.dateData = res.data.dateData;
        this.WdData = res.data.wdData;
        this.SdData = res.data.sdData;
        this.JcData = res.data.jcData;
        this.YlData = res.data.ylData;
        this.initEcharts();
      });
    },
    //折线图
    initEcharts() {
      var chartDom = document.getElementById('main');
      if (echarts.getInstanceByDom(chartDom)) {
        echarts.dispose(chartDom);
      }
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '压力', '湿度', '粉尘浓度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            symbolSize: 10,
            name: '温度',
            type: 'line',
            stack: 'Total',
            data: this.WdData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '压力',
            type: 'line',
            stack: 'Total',
            data: this.YlData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '湿度',
            type: 'line',
            stack: 'Total',
            data: this.SdData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '粉尘浓度',
            type: 'line',
            stack: 'Total',
            data: this.JcData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 查询数据
    getList() {
      this.loading = true;
      this.queryParams.type = "1";
      listReportDustTemp(this.queryParams).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.result;
          this.total = res.data.totalNum;
          this.loading = false;
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 重置数据表单
    reset() {
      this.form = {
        id: undefined,
        hostId: undefined,
        temperValue: undefined,
        pressValue: undefined,
        humValue: undefined,
        dustValue: undefined,
        saveTime: undefined,
        qTAlarm: undefined,
      };
      this.resetForm("form");
    },
    // 重置查询操作
    resetQuery() {
      this.timeRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleEcharts() {
      console.log(this.queryParams.machineName == undefined);
      if (this.queryParams.machineName == undefined) {
        this.$message({
          message: '请选择要主机名称',
          type: 'warning'
        });
        return;
      }
      this.getEcharts();

    }
  },
};
</script>
<style lang="less">
#hostList {
  .el-table__body {
    table-layout: fixed;
    border-collapse: separate;
    word-wrap: break-word;

    /* 允许长单词或URL地址在边界内自动换行 */
    .table-header {
      .el-table__cell {
        border-top: 1px solid black !important;
        border-bottom: 1px solid black !important;
      }
    }

    .first-child {
      // border-left: 1px solid black !important;
    }

    .el-table__cell {
      text-align: center;
      border-right: 1px solid black !important;
      border-bottom: 1px solid black !important;
      padding: 12px 0;
      min-width: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      word-wrap: break-word;
      /* 允许长单词或URL地址在边界内自动换行 */
    }

    .el-table__cell2 {
      text-align: center;
      border-right: 1px solid black !important;
      border-top: 1px solid black !important;
      padding: 12px 0;
      min-width: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      word-wrap: break-word;
      /* 允许长单词或URL地址在边界内自动换行 */
    }

    .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding-left: 10px;
      padding-right: 10px;
      word-wrap: break-word;
      /* 允许长单词或URL地址在边界内自动换行 */
    }
  }
}

.demo-form-inline {
  margin-top: 30px;
}

#mian {
  page-break-inside: avoid;
}

#archiveTitleList {
  tr {
    page-break-inside: avoid;
  }

  .el-table--border,
  .el-table--group {
    //  border: 1px solid black !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid black !important;
  }

  .el-table--border .el-table__cell {
    // border-right: 1px solid black !important;
  }
}

.print {
  display: none;
}

.print2 {
  display: block;
}

@page {
  size: auto;
  margin: 2113mm;
}

@media print {
  .print {
    display: block;
  }

  .print2 {
    display: none;
  }

  .chart-container {
    transform: scale(0.8);
    /* 根据实际需要调整缩放比例 */
    transform-origin: top left;
  }

  /* table 边框 */
  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
  }

  th,
  td {
    border: 1px solid black;
    text-align: left;
  }
}
</style>